<template>
  <div :class="$style.container">
    <ul>
      <li 
        v-for="(item,idx) in lists" 
        :key="item.doubanId" 
        :class="$style.item"
        @click.stop="handleItemClick(item)"
      >
        <div :class="$style.left">
          <img 
            :src="item.poster" 
            :alt="item.original_title">
          <span>{{ idx+1 }}</span>
        </div>
        <div :class="$style.right">
          <h4>{{ item.original_title }}</h4>
          <el-rate
            v-model="item.rate"
            :max="10"
            style="display: inline-block;" 
            disabled
            show-score
            show-text
            text-color="#ff9a00"
            score-template="{value}"/>
          <span :class="$style.rateCount">{{ item.ratings_count }}人评论</span>
          <p :class="$style.country">
            <span>国家: {{ item.countries.join('、') }}</span>
            <span>{{ item.wish_count }} 人想看</span>
          </p>
          <p 
            v-if="item.price" 
            :class="$style.price">
            <small>￥<strong>{{ item.price }}</strong></small>
          </p>
          <p 
            v-else 
            :class="$style.free">免费</p>
          <p>
            导演: {{ item.directors.map(item=>item.name).join('、') }}
          </p>
          <p>
            演员: {{ item.actors.map(item=>item.name).join('、') }}
          </p>
          <p :class="$style.btn">
            <el-button 
              v-if="item.price&& !item.isMyFilm" 
              size="small">立即购买</el-button>
            <el-button 
              v-if="item.price&& item.isMyFilm" 
              size="small">已购买</el-button>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import http from '../APIService/http'
export default {
  async asyncData(ctx) {
    try {
      let { keyWord, id } = ctx.query
      let token = ctx.app.$cookiz.get(ctx.app.$api.token)
      let params = {
        keyWord,
        doubanId: id,
        token
      }
      let res = await http.get(`/dianshang/searchFilm`, params)
      if (res.code === 0) {
        return { lists: res.data }
      }
    } catch (err) {
      console.log('list fail:', err)
    }
  },
  methods: {
    handleItemClick(item) {
      if (item.price && !item.isMyFilm) {
        this.handleBuyClick(item)
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    },
    /**
     * 立即购买
     */
    async handleBuyClick(item) {
      try {
        let token = this.$cookiz.get(this.$api.token)
        if (!token) {
          this.$store.commit('SET_SHOW', true)
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart?token=${token}`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  ul {
    list-style: none;
    border: 1px solid #e5e5e5;
    padding: 0px 20px;
    box-sizing: border-box;
    border-radius: 4px;

    li {
      padding: 10px 0px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      border-top: 1px solid #e5e5e5;
      &:nth-child(1) {
        border-top: none;
      }
      .left {
        position: relative;
        span {
          position: absolute;
          left: -3px;
          top: 3px;
          background: #fb6433;
          border-radius: 2px;
          text-align: center;
          font-size: 12px;
          color: #fff;
          line-height: 13px;
          width: 20px;
        }
        img {
          width: 350px;
          height: 200px;
          border-radius: 4px;
          object-fit: cover;
        }
      }
      .right {
        width: calc(100% - 350px);
        padding-left: 20px;
        box-sizing: border-box;
        p {
          margin: 8px 0px;
          color: #666;
          font-size: 14px;
        }
        h4 {
          margin: 10px 0px;
          font-weight: 500;
          font-size: 16px;
          color: #333;
        }
        .rateCount {
          margin-left: 20px;
          color: #f90;
          font-size: 14px;
          vertical-align: middle;
        }
        .country {
          color: #666;
          font-size: 14px;
          > span {
            margin-right: 20px;
          }
        }
        .price {
          font-size: 12px;
          color: #f01414;
          strong {
            font-size: 16px;
          }
        }
        .free {
          color: #be9e4d;
        }
        .btn {
          margin-top: 16px;
          button {
            background: #f20d0d;
            font-size: 12px;
            font-weight: 400;
            color: #fff;
            &:hover,
            &focus {
              color: #fff;
              border-color: #f20d0d;
              background-color: #f20d0d;
            }
          }
        }
      }
    }
  }
}
</style>
